<script setup>

import { computed,watch,ref,reactive} from 'vue';
import Son from './Son.vue';
import { provide } from 'vue';
const obj = ref({name:"张三",age:18,sex:"男"})
const msg = "父信息"
const provideInfo = "父组件提供的信息"
provide('provideInfo',provideInfo)
const btnName = (name='李四') => {
  console.log("点击姓名",name);
  
  obj.value.name = name
}
const btnAge = () => {
  obj.value.age = 20
}
const btnSex = () => {
  obj.value.sex = "女"
}

// watch(obj, (newVal, oldVal) => {
//   console.log('总监听器',newVal, oldVal)
// },{deep:true})

watch(()=> obj.value.name, (newVal, oldVal) => {
  console.log('name监听器',newVal, oldVal)
})

watch(()=> [obj.value.sex, obj.value.age], (newVal, oldVal) => {
  console.log('sex/age监听器',newVal, oldVal)
})

</script>

<template>
  <div>姓名：{{ obj.name }}</div>
  <div>年龄：{{ obj.age }}</div>
  <div>性别：{{ obj.sex }}</div>
  <button @click="btnName()">点击姓名 </button>
  <button @click="btnAge">点击年龄 </button>
  <button @click="btnSex">点击性别 </button>

  <br>
  <Son :obj="obj" msg="msg" @btnName="btnName"></Son>
</template>

<style scoped>

</style>
